.page4{
    display: flex;
    background:url(../img/beijing8.jpg) repeat-y;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.page4-body{
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.p4-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 72px;
}
.p4-card{
    width: 100%;
    height: 23%;
    margin-top: 2%;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    /* background-color: blueviolet; */
    background-color: rgba(252, 255, 255, 0.89);
}
.p4-card-title{
    font-size: 32px;
    font-weight: 700;
    padding: 0 16px;
    border-bottom: 1px solid #999;
}
.p4-card-content{
    flex: 1;
    padding: 16px;
}
.p4-card-content span{
    display: block;
    height: 32px;
    line-height: 32px;
}
.p4-card:nth-child(1){
    -webkit-animation:p4-top .8s .2s ease-in-out both;
			animation:p4-top .8s .2s ease-in-out both;
}
.p4-card:nth-child(2){
    height: 25%;
    -webkit-animation:p4-top .8s .7s ease-in-out both;
			animation:p4-top .8s .7s ease-in-out both;
}
.p4-card:nth-child(3){
    -webkit-animation:p4-top .8s 1.2s ease-in-out both;
			animation:p4-top .8s 1.2s ease-in-out both;
}
.p4-card:nth-child(4){
    height: 25%;
    -webkit-animation:p4-top .8s 1.7s ease-in-out both;
			animation:p4-top .8s 1.7s ease-in-out both;
}
@-webkit-keyframes p4-top{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	70%{ -webkit-transform:translateY(-5%); opacity:1;}
	80%{ -webkit-transform:translateY(2%); opacity:1;}
	90%{ -webkit-transform:translateY(-2%); opacity:1;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes p4-top{
	0%{ transform:translateY(100%); opacity:0;}
	70%{ transform:translateY(-5%); opacity:1;}
	80%{ transform:translateY(2%); opacity:1;}
	90%{ transform:translateY(-2%); opacity:1;}
	100%{ transform:translateY(0); opacity:1;}
}